<template>
  <div class="pufav_page">
    <Menus title="以案释法">
      <a @click="goback" href="javascript:void(0)" v-if="isPost">
        <div class="img_block">
          <img class="img_margin" src="static/img/icon_fanhui.png" alt="返回">
        </div>
        <span>返回</span>
      </a>
      <router-link to="/" v-if="isPost">
        <div class="img_block">
          <img class="img_margin" src="static/img/icon_fanhuishouye.png" alt="返回首页">
        </div>
        <span>返回首页</span>
      </router-link>
    </Menus>
    <template v-if="!isPost">
      <div class="container list-video">
        <div class="row">
          <div class="col-md-6" v-for="(item,index) in list" :key="'key-list-item-'+index">
            <a href="javascript:void(0)" class="item" :class="{is_video:item.video}" @click="showPost(item.id)">
              <div class="imgs" :style="`background-image:url(https://yn.12348.laway.cn${item.img[0]})`" v-if="item.img.length"></div>
              <div class="imgs" style="background-image:url(static/img/video_default.jpg)" v-else></div>
              <div class="article">
                <h2 class="title">{{item.title}}</h2>
                <span class="intro">
                  <span v-if="item.video">
                    <i class="glyphicon glyphicon-play-circle"></i> 播放次数：{{item.view_count}}次</span>
                  <span v-else>
                    <i class="glyphicon glyphicon-eye-open"></i> 浏览次数：203次</span>
                  <span>时间：{{item.post_time}}</span>
                </span>
              </div>
            </a>
          </div>
        </div>
        <div class="container">
          <div class="row">
            <div class="col-md-12">
              <div class="foot">
                <div class="tip" v-if="pagemax">已经全部加载</div>
                <div class="more-link" v-else>
                  <a href="javascript:void(0)" @click="loadMore()">加载更多</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

    </template>
    <div class="pufa_detail" v-if="isPost">
      <div class="main">
        <div class="title">
          <h1>{{post.title}}</h1>
          <span class="time">发布时间：{{post.post_time}}</span>
        </div>
        <div class="main_text">
          <div class="vedioCotent" :style="setImg(post.img)" v-if="post.video">
            <video id="myMedia" controls="controls" poster="" preload="preload" name="media" style="width: 100%; display:block"><source :src="'https://yn.12348.laway.cn'+post.video" type="video/mp4"></video>
          </div>
          <div style="color:red; text-align:center; padding:10px;" v-if="post.video">点击上面播放视频</div>
          <div v-html="post.content">
          </div>
        </div>
      </div>
    </div>

  </div>
</template>
<script>
import Menus from '../components/Menu'
import api from '../datas/api'
import typename from '../datas/typename'
import pufa from '../datas/pufa'

export default {
  data() {
    return {
      id: pufa[1].id,
      list: [],
      page: 1,
      pagemax: 0,
      isPost: false,
      post: '',
      scrollTop: 0
    }
  },
  methods: {
    setImg(arr) {
      const img = arr.length ? arr[0] : `/static/img/vedio_default.jpg`
      return `width:720px; margin: 0 auto; background:url(https://yn.12348.laway.cn${img}) 0% 0% / cover no-repeat`
    },
    goback() {
      this.isPost = false
      setTimeout(() => {
        this.$scrollTo(this.scrollTop)
      }, 0)
    },
    async showPost(id) {
      const { result } = await this.$get(api.pufa.post + id, this)
      this.scrollTop = document.documentElement.scrollTop
      this.post = result
      console.log(this.post)
      this.isPost = true
      this.$scrollTo(0)
    },
    async loadMore() {
      if (this.pagemax) return
      this.getList(this.page + 1)
    },

    async getList(page) {
      let query = '&code=' + this.$root.config.web_code
      let result = await this.$get(
        api.pufa.list + query + '&page=' + page,
        this
      )
      console.log(result)
      if (result.msg) {
        console.log('result.msg:' + result.msg)
        return
      }
      this.page = page
      this.list.push(...result.result.items)
      this.pagemax = result.result.items.length > 4 ? 0 : 1
      console.log(this.list)
    }
  },
  filters: {
    name(d) {
      return typename[d]
    }
  },
  async mounted() {
    await this.getList(this.page)
    console.log(this.$root)
  },
  components: {
    Menus
  }
}
</script>
<style lang="scss">
.pufav_page {
  padding-top: 160px;
  background: #eee;
  .list-video {
    padding: 30px 0 80px;
    a.item {
      display: flex;
      color: #333;
      padding: 25px;
      margin-bottom: 35px;
      flex-direction: column;
      background: #fff;
      &.is_video {
        .imgs:after {
          position: absolute;
          left: 50%;
          top: 50%;
          width: 80px;
          height: 80px;
          margin-top: -40px;
          margin-left: -40px;
          background: url("/static/img/video_play.png")
            no-repeat center center;
          z-index: 2;
          content: "";
        }
        .imgs:before {
          position: absolute;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
          background: rgba(0, 0, 0, 0.5);
          content: "";
          z-index: 1;
        }
      }
      .imgs {
        width: 100%;
        height: 260px;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
        position: relative;
      }
      .article {
        .title {
          font-size: 24px;
          font-weight: normal;
          line-height: 1.6;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          height: 70px;
        }
        .intro {
          font-size: 18px;
          color: #666;
          line-height: 50px;
          display: flex;
          span {
            padding-right: 20px;
            display: flex;
            align-items: center;
          }
        }
      }
    }
    .foot {
      padding: 60px 0;
      font-size: 20px;
      text-align: center;
      .tip {
        color: #666;
      }
      .more-link a {
        display: block;
        width: 200px;
        height: 66px;
        line-height: 66px;
        margin: 0 auto;
        border: 1px solid #ccc;
        color: #666;
      }
    }
  }
}

.pufa_detail {
  .main {
    margin: 0 auto;
    background: #fff;
    .title {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: #eee;
      margin: 0 auto;
      padding: 50px 0;
      .article_type {
        display: block;
        font-size: 18px;
        color: #333;
        margin: 0 auto 35px;
        text-align: center;
      }
      h1 {
        width: 1050px;
        font-size: 36px;
        text-align: center;
        color: #333;
        font-weight: normal;
        margin: 0 0 20px;
      }
      .time {
        font-size: 14px;
        color: #aaa;
      }
    }
  }
  .main_text {
    padding: 50px 0 100px;
    width: 1000px;
    margin: 0 auto;
    font-size: 20px;
    line-height: 1.8;
    p {
      color: #7a7a7a;
      margin: 0 0 25px;
    }
    img {
      display: block;
      background: #ddd;
      margin: 0 auto 20px;
      text-align: center;
    }
  }
}
</style>
